<template>
  <a-modal :title="modalTitle"
           :width="1100"
           :visible="visible"
           :confirmLoading="confirmLoading"
           @ok="handleSubmit"
           @cancel="handleCancel">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form"
              style="max-height: 500px;overflow-y: auto;overflow-x: hidden;">
        <a-tabs v-model="tabActiveKey"
                @change="changeTabs">
          <a-tab-pane key="1">
            <span slot="tab">
              <a-icon type="database" />
              基础信息
            </span>
            <a-row :gutter="12">

              <a-col :xl="{span: 12}"
                     :lg="{span: 12}"
                     :md="{span: 12}"
                     v-show="false">
                <a-form-item label="id"
                             :labelCol="labelCol"
                             :wrapperCol="wrapperCol">
                  <a-input v-decorator="['id', {rules: [{required: ( modalOpera===1), message: '请输入！'}]}]" />
                </a-form-item>

                <a-form-item label="父分类"
                             :labelCol="labelCol"
                             :wrapperCol="wrapperCol"
                             v-show="false">
                  <a-input v-decorator="['parentId', {rules: [{required: true, message: '请输入！'}]}]" />
                </a-form-item>

              </a-col>

              <a-col :xl="{span: 12}"
                     :lg="{span: 12}"
                     :md="{span: 12}">

                <a-form-item label="父分类"
                             :labelCol="labelCol"
                             :wrapperCol="wrapperCol">
                  <a-input v-decorator="['parentName', {rules: [{required: true, message: '请输入！'}]}]"
                           disabled />
                </a-form-item>

              </a-col>
              <a-col :xl="{span: 12}"
                     :lg="{span: 12}"
                     :md="{span: 24}">
                <a-form-item label="名称"
                             :labelCol="labelCol"
                             :wrapperCol="wrapperCol">
                  <a-input v-decorator="['name', {rules: [{required: true, min: 2, message: '请输入至少二个字符的规则！'}]}]" />
                </a-form-item>
              </a-col>
            </a-row>

            <a-row :gutter="12">
              <a-col :xl="{span: 12}"
                     :lg="{span: 12}"
                     :md="{span: 12}">
                <a-form-item label="编码"
                             :labelCol="labelCol"
                             :wrapperCol="wrapperCol">
                  <a-input v-decorator="['code', {rules: [{required: true, min: 2, message: '请输入至少二个字符的规则！'}]}]"
                           @change="codeChange" />
                </a-form-item>
              </a-col>
              <a-col :xl="{span: 12}"
                     :lg="{span: 12}"
                     :md="{span: 24}">
                <a-form-item label="分类模板"
                             :labelCol="labelCol"
                             :wrapperCol="wrapperCol">
                  <a-input-search v-decorator="['templatePath', {rules: [{required: true, min: 2, message: '请输入至少二个字符的规则！'}]}]"
                                  @search="onSearch"
                                  disabled />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="12">
              <a-col :xl="{span: 12}"
                     :lg="{span: 12}"
                     :md="{span: 12}">
                <a-form-item label="分类访问路径"
                             :labelCol="labelCol"
                             :wrapperCol="wrapperCol">
                  <a-input :disabled="true" v-decorator="['contentPath', {rules: [{required: true, min: 2, message: '请输入至少二个字符的规则！'}]}]" />
                </a-form-item>
              </a-col>

              <a-col :xl="{span: 12}"
                     :lg="{span: 12}"
                     :md="{span: 24}">
                <a-form-item label="排序"
                             :labelCol="labelCol"
                             :wrapperCol="wrapperCol">
                  <a-input-number style="width: 100%;"
                                  v-decorator="['sort', {rules: [{required: true, message: '请输入'}],initialValue:0}]" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :xl="{span: 12}"
                     :lg="{span: 6}"
                     :md="{span:6}">
                <a-form-item label="每页条数"
                             :labelCol="labelCol"
                             :wrapperCol="wrapperCol">
                  <a-input-number :min="2"
                                  :max="50"
                                  style="width: 100%;"
                                  v-decorator="['pageSize', {rules: [{required: true, message: '请输入'}],initialValue:10}]" />
                </a-form-item>
              </a-col>

              <a-col :xl="{span: 12}"
                     :lg="{span: 12}"
                     :md="{span: 12}">
                <a-form-item label="扩展分类"
                             :labelCol="labelCol"
                             :wrapperCol="wrapperCol">
                  <a-select placeholder="扩展分类"
                            @change="categoryExtendChange"
                            defaultValue=""
                            v-decorator="['categoryExtendId', {rules: [{required: false, message: '请选择'}], initialValue:''}]">
                    <a-select-option value=""
                                     key="">不扩展</a-select-option>
                    <a-select-option v-for="(ext ,index) in categoryExtends"
                                     :value="ext.id"
                                     :key="index">{{ ext.categoryExtendName }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>

            </a-row>

            <a-row :gutter="12">
              <a-col :xl="{span: 6}"
                     :lg="{span:8}"
                     :md="{span:12}">
                <a-form-item label="允许投稿"
                             :labelCol="labelCol"
                             :wrapperCol="wrapperCol">
                  <a-switch v-decorator="['allowContribute', {rules: [{required: false, message: '请输入'}],initialValue:true}]"
                            size="small"
                            v-model="editRes.allowContribute" />
                </a-form-item>
              </a-col>

              <a-col :xl="{span: 6}"
                     :lg="{span:8}"
                     :md="{span:12}">
                <a-form-item label="前台显示"
                             :labelCol="labelCol"
                             :wrapperCol="wrapperCol">
                  <a-tooltip placement="topLeft"
                             title="开启后将在网站首页显示该栏目">
                    <a-switch v-decorator="['hidden', {rules: [{required: false, message: '请输入'}],initialValue:true}]"
                              size="small"
                              v-model="editRes.hidden" />
                  </a-tooltip>
                </a-form-item>
              </a-col>

              <a-col :xl="{span: 6}"
                     :lg="{span:8}"
                     :md="{span:12}">
                <a-form-item label="是否单页"
                             :labelCol="labelCol"
                             :wrapperCol="wrapperCol">
                  <a-tooltip placement="topLeft"
                             title="单页栏目只能发布一篇文章">
                    <a-switch v-decorator="['singlePage', {rules: [{required: false, message: '请输入'}],initialValue:false}]"
                              size="small"
                              v-model="editRes.singlePage" />
                  </a-tooltip>
                </a-form-item>
              </a-col>

               <a-col :xl="{span: 6}" :lg="{span: 8}" :md="{span:12}">
                <a-form-item label="定时时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
			      <a-tooltip placement="topLeft" title="当需要从新生成分类列表页时的默认触发时间单位(秒)">
                  <a-input-number :min="10" :max="10000"  v-decorator="['afterGenSecond', {rules: [{required: true, message: '请输入'}],initialValue:10}]" />
                  </a-tooltip>
				</a-form-item>
              </a-col>

              <!-- <a-col :xl="{span: 6}" :lg="{span:8}" :md="{span:12}">
                <a-form-item label="静态化" :labelCol="labelCol" :wrapperCol="wrapperCol">
					 <a-tooltip placement="topLeft" title="开启后实时静态化页面,当数据量超 2000条后不建议开启">
                     <a-switch v-decorator="['autoGenStatic', {rules: [{required: false, message: '请输入'}],initialValue:false}]" size="small" v-model="editRes.autoGenStatic"/>
                     </a-tooltip>
				</a-form-item>
              </a-col>

              <a-col :xl="{span: 6}" :lg="{span: 6}" :md="{span:6}"  v-show="editRes.autoGenStatic">
                <a-form-item label="最大页码" :labelCol="labelCol" :wrapperCol="wrapperCol">
			      <a-tooltip placement="topLeft" title="实时静态化页面的最大页数">
                  <a-input-number :min="10" :max="50"  v-decorator="['maxStaticPage', {rules: [{required: true, message: '请输入'}],initialValue:10}]" />
                  </a-tooltip>
				</a-form-item>
              </a-col> -->
              <!-- <a-col :xl="{span: 8}" :lg="{span:8}" :md="{span:12}">
                <a-form-item label="含子类内容" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-switch v-decorator="['containChild', {rules: [{required: false, message: '请输入'}],initialValue:true}]" size="small" v-model="editRes.containChild"/>
                </a-form-item>
              </a-col> -->
            </a-row>
            <div v-show="extend">
              <a-divider dashed />
              <a-collapse :bordered="false"
                          :activeKey="activeCollapseKey">
                <a-collapse-panel header="扩展分类"
                                  key="1">
                  <p style="text-align: center;"
                     v-if="categoryExtends.length===0">~暂无扩展分类,请先创建分类扩展~</p>
                  <dynamic-field ref="dynamicField" :form="form"></dynamic-field>
                </a-collapse-panel>
              </a-collapse>
            </div>

          </a-tab-pane>
          <a-tab-pane key="2">
            <span slot="tab">
              <a-icon type="line-chart" />
              搜索引擎优化
            </span>
            <a-row :gutter="12">
              <a-col :xl="{span: 20}"
                     :lg="{span:20}"
                     :md="{span: 24}">
                <a-form-item label="标题"
                             :labelCol="labelCol"
                             :wrapperCol="wrapperCol">
                  <a-input v-decorator="['title', {rules: [{required: false, min: 2, message: '请输入至少二个字符的规则！'}]}]" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="12">
              <a-col :xl="{span: 20}"
                     :lg="{span: 20}"
                     :md="{span: 24}">
                <a-form-item label="关键字"
                             :labelCol="labelCol"
                             :wrapperCol="wrapperCol">
                  <a-input v-decorator="['keywords', {rules: [{required: false, min: 2, message: '请输入至少二个字符的规则！'}]}]" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="12">
              <a-col :xl="{span: 20}"
                     :lg="{span: 20}"
                     :md="{span: 24}">
                <a-form-item label="描述"
                             :labelCol="labelCol"
                             :wrapperCol="wrapperCol">
                  <a-textarea v-decorator="['description', {rules: [{required: false, max: 200, message: '请输入至少二个字符的规则！'}]}]">
                  </a-textarea>
                </a-form-item>
              </a-col>
            </a-row>
          </a-tab-pane>

          <a-tab-pane key="3">
            <span slot="tab">
              <a-icon type="bars" />
              选择内容模型
            </span>
            <a-row :gutter="24"
                   v-for="(model,index) in categoryModels"
                   :key="index">
              <a-col :xl="{span:3}"
                     :lg="{span: 7}"
                     :md="{span: 24}">
                <a-form-item :labelCol="labelCol"
                             :wrapperCol="{xs: {span: 10},sm:{ span: 6}}">
                  <a-radio-group v-decorator="['modelId', {rules: [{required: true, message: '必选'}],initialValue:editRes.containChild}]">
                    <a-radio :value="model.id">{{ model.name }}</a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>

              <a-col :xl="{span: 17}"
                     :lg="{span: 17}"
                     :md="{span: 24}">
                <a-form-item label="内容静态模板"
                             :labelCol="labelCol"
                             :wrapperCol="wrapperCol">
                  <a-input v-model="model.templatePath"
                           disabled />
                </a-form-item>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </a-form>
      <search-temp ref="searchTemp"
                   @ok="confirm"></search-temp>
    </a-spin>
  </a-modal>
</template>

<script>
import {
  listAllModel
} from '@/api/cms/model'
import {
  save,
  update,
  getById
} from '@/api/cms/category'
import {
  listAllExtends, getExtendFieldById
} from '@/api/cms/category/extend.js'
import {
  formatExtendFields
} from '@/components/ExtendsField'
import DynamicField from '@/components/DynamicField/DynamicField.vue'
import pick from 'lodash.pick'
import searchTemp from './searchTemp'
export default {
  components: {
    DynamicField,
    searchTemp
  },
  data() {
    return {
      labelCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 7
        }
      },
      wrapperCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 13
        }
      },
      modelRadioVal: '',
      tabActiveKey: '1',
      selectTreObj: {},
      editRes: { allowContribute: true, hidden: true, autoGenStatic: true, singlePage: false },
      categoryExtends: [],
      activeCollapseKey: '0',
      categoryModels: [],
      modalTitle: '',
      modalOpera: 0, // 0：新增 1：编辑
      visible: false,
      confirmLoading: false,
      dataSource: [],
      inputType: [],
      form: this.$form.createForm(this),
      extend: false,
      extendsField: [{
        name: 'code',
        type: 'text',
        required: true
      },
      {
        name: 'inputType',
        type: 'select',
        required: true
      }, {
        name: 'name',
        type: 'text',
        required: true
      },
      {
        name: 'isRequired',
        type: 'checkbox',
        required: true
      },
      {
        name: 'isSearch',
        type: 'checkbox',
        required: true
      },
      {
        name: 'defaultValue',
        type: 'text',
        required: true
      },
      {
        name: 'maxlength',
        type: 'number',
        required: true
      },
      {
        name: 'description',
        type: 'textarea',
        required: true
      },
      {
        name: 'sort',
        type: 'number',
        required: true
      }
      ],
      // 表头
      columns: [{
        title: '编码',
        dataIndex: 'code',
        align: 'center',
        width: '140px',
        scopedSlots: {
          customRender: 'code'
        }
      }, {
        title: '字段类型',
        dataIndex: 'inputType',
        align: 'center',
        width: '100px',
        scopedSlots: {
          customRender: 'inputType'
        }
      }, {
        title: '名称',
        dataIndex: 'name',
        align: 'center',
        width: '120px',
        scopedSlots: {
          customRender: 'name'
        }
      }, {
        title: '必填',
        dataIndex: 'isRequired',
        align: 'center',
        width: '100px',
        scopedSlots: {
          customRender: 'isRequired'
        }
      },
      {
        title: '可搜索',
        dataIndex: 'isSearch',
        align: 'center',
        width: '100px',
        scopedSlots: {
          customRender: 'isSearch'
        }
      }, {
        title: '默认值',
        dataIndex: 'defaultValue',
        align: 'center',
        width: '100px',
        scopedSlots: {
          customRender: 'defaultValue'
        }
      },
      {
        title: '最大长度',
        dataIndex: 'maxlength',
        align: 'center',
        width: '100px',
        scopedSlots: {
          customRender: 'maxlength'
        }
      },
      {
        title: '描述',
        dataIndex: 'description',
        align: 'center',
        width: '100px',
        scopedSlots: {
          customRender: 'description'
        }
      }, {
        title: '排序',
        dataIndex: 'sort',
        align: 'center',
        width: '100px',
        scopedSlots: {
          customRender: 'sort'
        }
      }, {
        title: '操作',
        dataIndex: 'action',
        align: 'center',
        width: '80px',
        scopedSlots: {
          customRender: 'action'
        }
      }
      ]
    }
  },
  created() {
    listAllExtends({}).then(response => {
      this.categoryExtends = response.res
    })
    this.loadModels()
  },
  methods: {
    add(selectTreObj) {
      this.selectTreObj = selectTreObj
      const that = this
      this.modal('新建分类', 0)
      setTimeout(function() {
        if (!selectTreObj.id) selectTreObj.id = 0
        if (!selectTreObj.title) selectTreObj.title = '父分类'
        that.form.setFieldsValue({
          parentId: selectTreObj.id
        })
        that.form.setFieldsValue({
          parentName: selectTreObj.title
        })
      }, 500)
    },
    loadModels() {
      listAllModel({}).then(response => {
        this.categoryModels = response.res
      })
    },
    edit(record) {
      this.modal('编辑分类', 1)
      const that = this
      getById({
        id: record.id
      }).then(response => {
        const result = response.res
        this.editRes = result
        this.form.setFieldsValue(
          pick(
            result,
            'id',
            'parentId',
            'name',
            'templatePath',
            'code',
            'contentPath',
            'parentName',
            'sort',
            'pageSize',
            'categoryExtendId',
            'hidden',
            'singlePage',
            'allowContribute',
            'afterGenSecond'
          )
        )
        if (result.categoryExtendId && result.extendFieldList) {
          this.activeCollapseKey = '1'
          this.extend = true
          setTimeout(function() {
            that.$refs.dynamicField.setDynamicFields(result.extendFieldList)
          }, 500)
        } else {
          this.activeCollapseKey = '0'
          this.extend = false
        }
      })
    },
    codeChange(e) {
      if (e.target.value) {
        this.form.setFieldsValue({ 'contentPath': '/' + e.target.value + '/index.html' })
      } else {
        this.form.setFieldsValue({ 'contentPath': '' })
      }
    },
    confirm(path) {
      this.form.setFieldsValue({ 'templatePath': path })
    },
    changeTabs(key) {
      const that = this
      if (key === '2') {
        setTimeout(function() {
          that.form.setFieldsValue(
            pick(
              that.editRes,
              'title',
              'keywords',
              'description'
            )
          )
        }, 300)
      } else if (key === '3') {
        this.loadModels()
        setTimeout(function() {
          that.form.setFieldsValue(
            pick(
              that.editRes,
              'modelId'
            )
          )
        }, 300)
      }
    },
    modal(title, opera) {
      this.modalTitle = title
      this.modalOpera = opera
      this.visible = true
      this.clearDataSource()
      this.form.resetFields()
    },
    handleSubmit() {
      const {
        form: {
          validateFields
        }
      } = this
      // this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          const params = this.$refs.dynamicField.getParams()
          if (this.modalOpera === 0) {
            save(params).then(response => {
              if (response.code === 0) {
                this.$message.info(response.msg)
                this.$emit('ok')
                this.handleCancel()
              }else{
                this.$message.error(response.msg)
              }
            })
          } else if (this.modalOpera === 1) {
            update(params).then(response => {
              if (response.code === 0) {
                this.$message.info(response.msg)
                this.$emit('ok')
                this.handleCancel()
              }else{
                this.$message.error(response.msg)
              }
            })
          }
        }
        this.confirmLoading = false
      })
    },
    categoryExtendChange(id) {
      let extendsJson = []
      const that = this
      if (id) {
        getExtendFieldById({ id: id }).then(response => {
          if (response.code === 0 && response.extendField.length > 0) {
            that.activeCollapseKey = '1'
            extendsJson = response.extendField
            setTimeout(function() {
              that.$refs.dynamicField.setDynamicFields(extendsJson)
            }, 500)
          }
        })
        this.extend = true
      } else {
        that.activeCollapseKey = '0'
        this.extend = false
      }
    },
    onSearch(value) {
      this.$refs.searchTemp.selectTemp()
    },
    handleCancel() {
      this.visible = false
      this.confirmLoading = false
      this.editRes = { allowContribute: true, hidden: true, containChild: true }
      this.tabActiveKey = '1'
      if (this.activeCollapseKey === '1') {
          this.$refs.dynamicField.resetDynamicFields()
      }
      this.activeCollapseKey = '0'
    },
    handleAddExtendsField() {
      const newData = {
        code: '',
        inputType: this.inputType[0].value,
        name: '',
        isRequired: false,
        isSearch: false,
        defaultValue: '',
        maxlength: '',
        description: '',
        sort: 0,
        id: Date.now()
      }
      this.dataSource = [...this.dataSource, newData]
    },
    handleDeleteExtendsField(record, index) {
      this.dataSource.splice(index, 1)
    },
    setDataSource(data) {
      this.dataSource = data
    },
    clearDataSource() {
      this.dataSource = []
    },
    handleChange(e, key, column, index, inputType) {
      const newData = [...this.dataSource]
      const target = newData.filter(item => key === item.id)[0]
      if (target) {
        if (inputType === 'checkbox') {
          target[column] = e.target.checked
        } else {
          target[column] = (e instanceof Object) ? e.target.value : e
        }
      }
      console.log(this.dataSource)
    },
    selectInputType() {
      const inputTypes = [{
        value: 'text',
        label: '输入框'
      }, {
        value: 'textarea',
        label: '区域框'
      }, {
        value: 'number',
        label: '数字'
      }, {
        value: 'date',
        label: '日期'
      }, {
        value: 'file',
        label: '文件'
      }, {
        value: 'picture',
        label: '图片'
      }]
      this.inputType = inputTypes
    }
  }
}
</script>
